<template>
  <div class="m-login-container">
    <el-tabs v-model="step">
      <el-tab-pane label="套餐组信息" name="baseInfo">
        <div class="m-main-content-body">
          <div class="inner">
            <el-form
              hide-required-asterisk
              :model="baseInfo"
              :rules="rules"
              ref="refBaseInfoForm"
              label-width="90px"
              class="label-row"
            >
              <el-form-item prop="name" label="名称">
                <el-input
                  clearable
                  size="small"
                  v-model="baseInfo.name"
                  placeholder="名称"
                ></el-input>
              </el-form-item>
              <el-form-item prop="sn" label="sn编号">
                <el-input
                  clearable
                  size="small"
                  v-model="baseInfo.sn"
                  placeholder="sn编号"
                ></el-input>
              </el-form-item>
              <el-form-item prop="compose_num" label="套餐数量">
                <el-input
                  clearable
                  size="small"
                  v-model.number="baseInfo.compose_num"
                  placeholder="套餐数量"
                ></el-input>
              </el-form-item>
              <el-form-item prop="main_product_id" label="主产品id">
                <el-input
                  clearable
                  size="small"
                  v-model.number="baseInfo.main_product_id"
                  placeholder="主产品id"
                ></el-input>
              </el-form-item>

              <el-form-item prop="b_group_id" label="b套餐组id">
                <el-input
                  clearable
                  size="small"
                  v-model.number="baseInfo.b_group_id"
                  placeholder="b套餐组id"
                ></el-input>
              </el-form-item>
              <el-form-item prop="fb_pixel" label="fb像素">
                <el-input
                  clearable
                  size="small"
                  v-model="baseInfo.fb_pixel"
                  placeholder="fb像素"
                ></el-input>
              </el-form-item>
              <el-form-item prop="fb_url" label="fb page">
                <el-input
                  clearable
                  size="small"
                  v-model="baseInfo.fb_url"
                  placeholder="fb page"
                ></el-input>
              </el-form-item>
              <el-form-item prop="line_url" label="lintepage">
                <el-input
                  clearable
                  size="small"
                  v-model="baseInfo.line_url"
                  placeholder="lintepage"
                ></el-input>
              </el-form-item>
            </el-form>
            <span class="dialog-footer">
              <el-button type="success" @click="composeGroupInfoOperate()"
                >保存</el-button
              >
            </span>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="套餐列表" name="composeList">
        <el-row class="m-main-header-search">
          <el-button
            @click="handleOpareteClick(1)"
            type="primary"
            size="small"
            icon="el-icon-circle-plus-outline"
          >
            新增
          </el-button>
        </el-row>
        <div class="m-main-content-body">
           <p class="contant-body-title">套餐组</p>
          <el-table
            ref="multipleTable"
            :data="list"
            tooltip-effect="dark"
            style="width: 100%"
            stripe
            :header-cell-style="{
              'background-color': '#E5EEFF',
            }"
          >
            <el-table-column
              prop="name"
              label="名称"

            >
            </el-table-column>
            <el-table-column
              prop="compose_sn"
              label="套餐编号"
               width="160"
            ></el-table-column>
            <el-table-column
              prop="price"
              label="价格"
                width="80"
            ></el-table-column>
            <el-table-column
              prop="user_name"
              label="所属用户"
               width="80"
            ></el-table-column>
            <el-table-column
              prop="share_type"
              label="共享类型"
              width="100"

            ></el-table-column>
            <el-table-column
              prop="time"
              label="创建时间"
  width="180"
            >
              <template slot-scope="scope">
                {{
                  scope.row.time
                    ? $moment(scope.row.time).format("YYYY/MM/DD HH:mm:ss")
                    : "--"
                }}
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="180"
            >
              <template slot-scope="scope">
                <el-button
                  class="table-operate-btn"
                  @click="handleOpareteClick(2, scope.row)"
                  type="text"
                  size="small"
                  >编辑</el-button
                >
                <el-button
                  class="table-operate-btn"
                  @click="handleOpareteProductClick(scope.row)"
                  type="text"
                  size="small"
                >
                  查看商品
                </el-button>
                <el-button
                  class="table-operate-btn red-btn-text"
                  @click="delCompose(scope.row.id)"
                  type="text"
                  size="small"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

    <dialog-set
      v-if="dislogSetVisible"
      @close="dislogSetVisible = false"
      :info="tempInfo"
      :group_id="group_id"
      @getList="getComposeList"
    ></dialog-set>
    <!-- <dialog-product
      v-if="dislogProductVisible"
      @close="dislogProductVisible = false"
      :info="composeInfo"
    ></dialog-product> -->
  </div>
</template>

<script>
import DialogSet from "./components/DialogSet";
import { getSn } from "@/utils/index";

export default {
  components: {
    DialogSet,
  },
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    group_id() {
      return this.$route.query.id ? +this.$route.query.id : "";
    },
  },
  data() {
    return {
      step: "baseInfo",
      attrStep: "attrDisplay",
      list: [],
      rules: {
        name: [
          { required: true, message: "", trigger: "blur" },
          { min: 1, max: 30, message: "", trigger: "blur" },
        ],
      },
      newId: "",
      baseInfo: {
        sn: "",
      },
      dislogSetVisible: false,
      tempInfo: {},
      composeInfo: {},
      dislogProductVisible: false,
    };
  },
  mounted() {
    if (this.group_id) {
      this.getComposeList();
      this.getComposeGroupDetail(); // 套餐组详情
    } else {
      this.baseInfo.sn = getSn("pbs_g");
    }
  },
  methods: {
    /*
     * @Desc: 获取
     */
    async getComposeList() {
      const { data } = await this.$api.compose.composeList({
        group_id: this.group_id,
      });
      const { code, data: info } = data;
      if (code === 200) {
        this.list = info;
      }
    },

    /*
     * @Desc: 套餐组详情
     */
    async getComposeGroupDetail() {
      const { data } = await this.$api.compose.composeGroupInfo({
        id: this.group_id,
      });
      const { code, data: info } = data;
      if (code === 200) {
        const {
          name,
          sn,
          compose_num,
          main_product_id,
          b_group_id,
          fb_pixel,
          fb_url,
          line_url,
        } = info;
        this.baseInfo = {
          name,
          sn,
          compose_num,
          main_product_id,
          b_group_id,
          fb_pixel,
          fb_url,
          line_url,
        };
      }
    },

    /*
     * @Desc: 套餐组新增/编辑
     */
    async composeGroupInfoOperate() {
      this.$refs.refBaseInfoForm.validate(async (valid) => {
        if (!valid) return;
        const type = this.group_id ? "update" : "create";
        const params = {
          [type]: {
            ...this.baseInfo,
            id: this.group_id ? +this.group_id : null,
          },
        };
        const { data } = await this.$api.compose.composeGroupOperate(params);
        const { code, data: id } = data;
        if (code !== 200) return this.$message.warning("数据不合法");
        if (!this.group_id) {
          this.$router.push({
            query: {
              ...this.$route.query,
              id,
            },
          });
        }
        this.$message.success("保存成功");
      });
    },

    /*
     * @Desc: 套餐 编辑/新增/删除
     * @params: {String}
     * @return: {Object}
     */
    async handleOpareteClick(type, row = {}) {
      if (type === "del") {
      } else {
        this.tempInfo = {
          modalType: type,
          ...row,
        };
        this.dislogSetVisible = true;
      }
    },

    /*
     * @Desc: 套餐商品编辑/新增
     * @params: {String}
     * @return: {Object}
     */
    async handleOpareteProductClick(row = {}) {
      this.$router.push({
        name: "composeProductInfo",
        query: {
          id: row.id,
        },
      });
    },

    /**
     * @Desc 数据提交
     * */
    async delCompose(id) {
      this.$delConfirm(null, null, async () => {
        const { data } = await this.$api.compose.composeOperate({
          delete: { id },
        });
        console.log(data);
        this.__globalHandleResponseMixin(data, () => {
          this.getComposeList();
          this.$message.success("删除成功");
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.m-main-content-body {
  .inner {
    width: 420px;
    margin: 0 auto;
  }
}
.dialog-footer {
  display: block;
  margin-top: 20px;
  overflow: hidden;
  .el-button {
    float: right;
  }
}
</style>
